import React from 'react'
import { Card, Button, Avatar, Tag, Divider } from 'antd';
import { UserOutlined, BookOutlined, GlobalOutlined } from '@ant-design/icons';
import { Character } from '../types';

interface CharacterCardProps {
  character: Character;
  onSelect: () => void;
}

const CharacterCard: React.FC<CharacterCardProps> = ({ character, onSelect }) => {
  return (
    <Card
      hoverable
      style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
      cover={
        <div style={{ height: '200px', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Avatar 
            size={150} 
            icon={<UserOutlined />} 
            src={character.avatar} 
            alt={character.name}
            style={{ backgroundColor: '#1890ff' }}
          />
        </div>
      }
      actions={[
        <Button 
          type="primary" 
          size="large" 
          block 
          onClick={onSelect}
          style={{ marginTop: '10px' }}
        >
          开始对话
        </Button>
      ]}
    >
      <Card.Meta
        title={
          <div>
            <span>{character.name}</span>
            <span style={{ marginLeft: '10px', color: '#8c8c8c' }}>({character.nameEn})</span>
          </div>
        }
        description={<p>{character.description}</p>}
      />
      
      <Divider style={{ margin: '15px 0' }} />
      
      <div style={{ marginBottom: '10px' }}>
        <div style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>
          <BookOutlined style={{ marginRight: '5px', color: '#1890ff' }} />
          <span style={{ fontWeight: 'bold' }}>性格特点：</span>
        </div>
        <div>
          {character.personality.map((trait, index) => (
            <Tag key={index} color="blue" style={{ margin: '2px' }}>{trait}</Tag>
          ))}
        </div>
      </div>
      
      <div style={{ marginBottom: '10px' }}>
        <div style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>
          <GlobalOutlined style={{ marginRight: '5px', color: '#1890ff' }} />
          <span style={{ fontWeight: 'bold' }}>语言能力：</span>
        </div>
        <div>
          {character.language.map((lang, index) => (
            <Tag key={index} color="green" style={{ margin: '2px' }}>{lang}</Tag>
          ))}
        </div>
      </div>
    </Card>
  );
};

export default CharacterCard;